<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div
    class="text-editor mat-elevation-z8 p-4 h-full"
    [style.width.px]="width"
    cdkDrag
    resizable
    (resized)="resized($event)">
    <form class="h-full" [formGroup]="textEditorForm" cdkTrapFocus [cdkTrapFocusAutoCapture]="!readonly">
        <div class="flex flex-col gap-y-3 relative h-full">
            <div class="flex flex-col gap-y-0.5 flex-1">
                <codemirror
                    formControlName="value"
                    [config]="codemirrorConfigWithState"
                    [style.width]="editorStyling.width"
                    [style.height]="editorStyling.height"
                    (mousedown)="preventDrag($event)"
                    (ready)="codeMirrorLoaded()" />
                @if (!readonly) {
                    <mat-checkbox
                        formControlName="setEmptyString"
                        (mousedown)="preventDrag($event)"
                        (change)="setEmptyStringChanged()">
                        <mat-label class="checkbox-label">Set empty string</mat-label>
                    </mat-checkbox>
                }
            </div>
            <div class="flex justify-end items-center gap-x-2">
                @if (readonly) {
                    <button mat-flat-button type="button" (mousedown)="preventDrag($event)" (click)="cancelClicked()">
                        Close
                    </button>
                } @else {
                    <button mat-button type="button" (mousedown)="preventDrag($event)" (click)="cancelClicked()">
                        Cancel
                    </button>
                    <button
                        [disabled]="!textEditorForm.dirty || textEditorForm.invalid"
                        (mousedown)="preventDrag($event)"
                        type="button"
                        (click)="okClicked()"
                        mat-flat-button>
                        Ok
                    </button>
                }
            </div>
        </div>
    </form>
</div>
